<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="sport pd20">

        <div class="outdoor-run">
            户外跑
        </div>

        <div class="sporting dpflex">
            <span class="text">运动中</span>
            <div class="symbol">
                <span class="iconfont icon-yinle"></span>
                <span class="iconfont icon-shezhi"></span>
            </div>
        </div>

        <div class="kilometers dpflex">
            <span class="number">99.99</span>
            <span class="text">公里</span>
        </div>

        <div class="location dpflex">
            <span class="text">GPS信号较低,数据准确度低</span>
            <span class="line">----------</span>
            <span class="iconfont icon-location"></span>
        </div>

        <div class="font dpflex">
            <div class="dpflex">
                <span class="iconfont icon-pace"></span>
                <p class="text">配速
                <p>
            </div>

            <div class="dpflex">
                <span class="iconfont icon-timeuse"></span>
                <p class="text">用时</p>
            </div>

            <div class="dpflex">
                <span class="iconfont icon-quantityheat"></span>
                <p class="text">千卡</p>
            </div>
        </div>

        <div class="time dpflex">
            <span class="across">一一</span>
            <span class="second">00:00:20</span>
            <span class="quantityheat">3000</span>
        </div>

        <div class="bottom">
            <button class="btn dpflex" id="pause">
                <i class="iconfont icon-start"></i>
                <span>暂停</span>
            </button>
            <span class="iconfont icon-lock" id="lock"></span>


            <p class="left dpflex" id="left">
                <i class="iconfont icon-initiate dpflex"><span>继续</span></i>
            </p>
            <p class="right dpflex" id="right">
                <i class="iconfont icon-end dpflex"><span>结束</span></i>
            </p>

        </div>
    </div>
</body>

</html>